<template>
    <div class="app-container">
        <el-form :model="queryParams" :inline="true">
            <el-form-item label="报销日期">
                <el-date-picker type="date" placeholder="请选择报销日期" 
                    clearable
                    size="small"
                    v-model="queryParams.cashTimeStart"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="报销人">
                <el-input placeholder="请填写报销人" v-model="queryParams.expenseName" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['pro:cash:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" v-hasPermi="['pro:cash:delete']" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>
           
        </el-row>

        <el-table 
            :data="tableData"
            :stripe="true"
            v-loading="loading"
            row-key="travelId"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="80" align="center"></el-table-column>
            <el-table-column prop="expenseTime" label="报销日期">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.cashTimeStart,'{y}-{m}-{d}') + '至' + parseTime(scope.row.cashTimeEnd,'{y}-{m}-{d}')}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="totalAmount" label="报销总金额"></el-table-column>
            <el-table-column prop="expenseName" label="报销人"></el-table-column>
            <el-table-column prop="taskName" label="当前任务名称">
                <template slot-scope="scope">
                    <span class="badge badge-primary">{{scope.row.taskName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="opt" label="操作">
                <template slot-scope="scope">
                    <el-button @click="showTravel(scope.row)" size="small" type="text">查看</el-button>
                    <el-button type="text" v-if="scope.row.taskName=='未上报' || scope.row.taskName=='调整修改'" @click="handleEdit(scope.row)" size="small" v-hasPermi="['pro:cash:edit']">修改</el-button>
                    <el-button type="text" @click="printTravel(scope.row)" size="small">打印</el-button>
                    <el-button type="text" v-if="scope.row.taskName=='未上报'" @click="reportData(scope.row)" size="small">提交申请</el-button>
                    <el-button type="text" v-if="scope.row.taskName!='未上报'" @click="handleViewHist(scope.row)" size="small">审核记录</el-button>
                    <el-button type="text" v-if="scope.row.taskName=='调整修改'" @click="reportDataAgain(scope.row)" size="small">重新上报</el-button>
                    
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="handleQuery"
        />

        <!-- 报销页面 -->
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="80%"
        >
            <el-form :model="dataFrom" :rules="rules" ref="dataFrom" label-width="120px">
                <el-row >
                    <el-col :span="12">
                        <el-form-item label="报销人归属部门" prop="deptId">
                            <treeselect style="width: 340px" v-model="dataFrom.deptId" :options="deptOptions" placeholder="请选择部门"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="expenseName">
                            <el-input style="width: 340px" v-model="dataFrom.expenseName"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="填报日期" prop="expenseTime">
                            <el-date-picker type="date" placeholder="请选择填报日期" 
                                clearable
                                style="width: 340px"
                                v-model="dataFrom.expenseTime"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报销时间" prop="cashTimeStart">
                            <el-date-picker placeholder="报销时间" type="daterange" range-separator="-"
                                clearable
                                style="width: 340px"
                                v-model="dataFrom.cashTime"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="productId">
                            <el-select v-model="dataFrom.productId" placeholder="请选择项目" style="width: 340px">
                                <el-option v-for="i in proItemOpt" :key="i.id" :label="i.itemName" :value="i.id" filterable ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div>
                <el-tag style="margin-bottom:2px">往返车票</el-tag>
                <i class="el-icon-circle-plus-outline" style="color: #1890ff;" @click="showItem">
                    <a >新增</a>
                </i>

                <el-table :data="itemData" show-summary :summary-method="getSummaries">
                    <el-table-column prop="startTime" label="出发时间" width="160">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.changeTravelItemList[0].startTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="invoiceNumSum" label="单据张数" :formatter="formatInvoiceNumSum" width="160"></el-table-column>
                    <el-table-column prop="travelNum" label="出差天数" width="160"></el-table-column>
                    <el-table-column prop="travelAllowance" label="补助金额" width="120"></el-table-column>
                    <el-table-column prop="expenseMoneySum" label="总金额" :formatter="formatExpenseMoney" width="160"></el-table-column>
                    
                    <el-table-column prop="fileList" label="是否有附件" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.fileInfoList && scope.row.fileInfoList.length>0">有</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="opt" label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="editItem(scope)" type="primary" size="mini">修改</el-button>
                            <el-button @click="deleteItem(scope)" type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
            </div>
            <div>
                <el-tag style="margin-bottom:2px;margin-top:25px;">市内车票/住宿</el-tag>
                <i class="el-icon-circle-plus-outline" style="color: #1890ff;" @click="showItem1">
                    <a >新增</a>
                </i>
                <el-table :data="itemData1" show-summary :summary-method="getSummaries">
                    <el-table-column prop="travelType" label="报销内容" :formatter="formatTravelType" width="120"></el-table-column>
                    <el-table-column prop="startTime" label="发生日期" width="120">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.startTime,'{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="invoiceNum" label="单据张数" width="100"></el-table-column>
                    <el-table-column prop="expenseMoney" label="金额" width="100"></el-table-column>
                    <el-table-column prop="fileList" label="是否有附件" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.fileInfoList && scope.row.fileInfoList.length>0">有</span>
                            <span v-else>无</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expenseRemark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="opt" label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="editItem1(scope)" type="primary" size="mini">修改</el-button>
                            <el-button @click="deleteItem1(scope)" type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="!(dataFrom.travelId)" type="primary" @click="submitForm">确定</el-button>
                <el-button v-if="dataFrom.travelId" type="primary" @click="updateForm">确定</el-button>
                <el-button type="cancle" @click="cancleForm">取消</el-button>
            </div>

            <!-- 报销明细页面 -->
            <el-dialog
                width="70%"
                title="填写现金单"
                :visible.sync="innerVisible"
                append-to-body>
                <el-form :model="itemForm" ref="itemForm" label-width="80px" :rules="itemRules">
                    <div class="div_travel" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '1'">
                        <el-tag>出发</el-tag>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="出发时间" 
                                :prop="'changeTravelItemList.'+index+'.startTime'" 
                                :rules="[
                                        { required: true, message: '出发时间不能为空', trigger: 'blur' }
                                 ]"
                                  >
                                    <el-date-picker class="hehe" style="width: 180px" type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.startTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="出发地" 
                                :prop="'changeTravelItemList.'+index+'.beginPlace'" 
                                :rules="[
                                        { required: true, message: '出发地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px"  v-model="changeTravelItem.beginPlace" />
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="交通工具" 
                                :prop="'changeTravelItemList.'+index+'.transport'" 
                                :rules="[
                                        { required: true, message: '交通工具不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-select style="width: 180px" v-model="changeTravelItem.transport" placeholder="请选择">
                                        <el-option
                                        v-for="dict in transportOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="到达时间" 
                                :prop="'changeTravelItemList.'+index+'.arriveTime'" 
                                :rules="[
                                        { required: true, message: '到达时间不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-date-picker style="width: 180px"  type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.arriveTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地" 
                                :prop="'changeTravelItemList.'+index+'.endPlace'" 
                                :rules="[
                                        { required: true, message: '目的地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.endPlace"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单据张数" 
                                :prop="'changeTravelItemList.'+index+'.invoiceNum'" 
                                :rules="[
                                        { required: true, message: '单据张数不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input-number style="width: 180px" v-model="changeTravelItem.invoiceNum" :min="0"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="金额" 
                                :prop="'changeTravelItemList.'+index+'.expenseMoney'" 
                                :rules="[
                                        {required: true, message: '请填写正确金额', trigger: 'blur'},
                                        {
                                            pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                                            message: '请填写正确金额',
                                            trigger: 'blur'
                                        }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.expenseMoney" prefix-icon="el-icon-money"/>
                                </el-form-item>
                            </el-col>
                        </el-row>    
                    </div>
                    
                    <div class="div_travel div_travel_top" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '2'">
                        <el-tag v-if="itemForm.changeTravelItemList !== undefined && itemForm.changeTravelItemList.length > 0">中转</el-tag>
                        <i class="el-icon-remove-outline" style="color: #1890ff;float:right " @click="deleteChangeTravel(changeTravelItem.index)">
                            <a >删除</a>
                        </i>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="出发时间" 
                                :prop="'changeTravelItemList.'+index+'.startTime'" 
                                :rules="[
                                        { required: true, message: '出发时间不能为空', trigger: 'blur' }
                                 ]"
                                  >
                                    <el-date-picker style="width: 180px" type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.startTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="出发地" 
                                :prop="'changeTravelItemList.'+index+'.beginPlace'" 
                                :rules="[
                                        { required: true, message: '出发地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px"  v-model="changeTravelItem.beginPlace" />
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="交通工具" 
                                :prop="'changeTravelItemList.'+index+'.transport'" 
                                :rules="[
                                        { required: true, message: '交通工具不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-select style="width: 180px" v-model="changeTravelItem.transport" placeholder="请选择">
                                        <el-option
                                        v-for="dict in transportOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="到达时间" 
                                :prop="'changeTravelItemList.'+index+'.arriveTime'" 
                                :rules="[
                                        { required: true, message: '到达时间不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-date-picker style="width: 180px"  type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.arriveTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地" 
                                :prop="'changeTravelItemList.'+index+'.endPlace'" 
                                :rules="[
                                        { required: true, message: '目的地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.endPlace"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单据张数" 
                                :prop="'changeTravelItemList.'+index+'.invoiceNum'" 
                                :rules="[
                                        { required: true, message: '单据张数不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input-number style="width: 180px" v-model="changeTravelItem.invoiceNum" :min="0"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="金额" 
                                :prop="'changeTravelItemList.'+index+'.expenseMoney'" 
                                :rules="[
                                        {required: true, message: '请填写正确金额', trigger: 'blur'},
                                        {
                                            pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                                            message: '请填写正确金额',
                                            trigger: 'blur'
                                        }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.expenseMoney" prefix-icon="el-icon-money"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>    

                    <div class="div_travel div_travel_top" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '3'">
                        <el-tag>返程</el-tag>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="出发时间" 
                                :prop="'changeTravelItemList.'+index+'.startTime'" 
                                :rules="[
                                        { required: true, message: '出发时间不能为空', trigger: 'blur' }
                                 ]"
                                  >
                                    <el-date-picker style="width: 180px" type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.startTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="出发地" 
                                :prop="'changeTravelItemList.'+index+'.beginPlace'" 
                                :rules="[
                                        { required: true, message: '出发地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px"  v-model="changeTravelItem.beginPlace" />
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="交通工具" 
                                :prop="'changeTravelItemList.'+index+'.transport'" 
                                :rules="[
                                        { required: true, message: '交通工具不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-select style="width: 180px" v-model="changeTravelItem.transport" placeholder="请选择">
                                        <el-option
                                        v-for="dict in transportOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="dict.dictValue"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="到达时间" 
                                :prop="'changeTravelItemList.'+index+'.arriveTime'" 
                                :rules="[
                                        { required: true, message: '到达时间不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-date-picker style="width: 180px"  type="datetime" placeholder="请选择费用发生日期" 
                                        clearable
                                        v-model="changeTravelItem.arriveTime"
                                        format="yyyy-MM-dd HH:mm"
                                        value-format="yyyy-MM-dd HH:mm" 
                                        default-time="12:00:00">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地" 
                                :prop="'changeTravelItemList.'+index+'.endPlace'" 
                                :rules="[
                                        { required: true, message: '目的地不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.endPlace"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单据张数" 
                                :prop="'changeTravelItemList.'+index+'.invoiceNum'" 
                                :rules="[
                                        { required: true, message: '单据张数不能为空', trigger: 'blur' }
                                 ]"
                                >
                                    <el-input-number style="width: 180px" v-model="changeTravelItem.invoiceNum" :min="0"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col :span="8">
                                <el-form-item label="金额" 
                                :prop="'changeTravelItemList.'+index+'.expenseMoney'" 
                                :rules="[
                                        {required: true, message: '请填写正确金额', trigger: 'blur'},
                                        {
                                            pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                                            message: '请填写正确金额',
                                            trigger: 'blur'
                                        }
                                 ]"
                                >
                                    <el-input style="width: 180px" v-model="changeTravelItem.expenseMoney" prefix-icon="el-icon-money"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <el-form-item label="出差天数" prop="travelNum">
                        <el-input-number style="width: 180px" v-model="itemForm.travelNum" :min="0"></el-input-number>
                    </el-form-item>
                    <el-form-item label="出差补助" prop="travelAllowance">
                        <el-input style="width: 180px" v-model="itemForm.travelAllowance" prefix-icon="el-icon-money"/>
                    </el-form-item>

                    <el-form-item label="附件">
                        <el-upload
                            ref="upload"
                            :headers="upload.headers"
                            :action="upload.url"
                            :disabled="upload.isUploading"
                            :on-progress="handleFileUploadProgress"
                            :on-success="handleFileSuccess"
                            :on-remove="handleRemoveFile"
                            :file-list="itemForm.fileInfoList"
                            multiple
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    
                    <el-form-item label="备注" prop="expenseRemark">
                        <el-input style="width: 240px" type="textarea" v-model="itemForm.expenseRemark" maxlength="200" placeholder="可不填" show-word-limit/>
                    </el-form-item>
                </el-form>

            

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addChangeTravelItem">增加中转</el-button>
                    <el-button type="primary" @click="submitItemForm">确定</el-button>
                    <el-button type="cancle" @click="cancleItemForm">取消</el-button>
                </div>
            </el-dialog>
            <!-- 报销明细页面 结束 -->
            <!-- 打车/住宿明细页面 -->
            <el-dialog
                width="30%"
                title="填写现金单"
                :visible.sync="innerVisible1"
                append-to-body>
                <el-form :model="itemForm1" ref="itemForm1" label-width="80px" :rules="itemRules">
                    <el-form-item label="报销内容" prop="travelType">
                        <el-select style="width: 240px" v-model="itemForm1.travelType" placeholder="请选择">
                            <el-option
                            v-for="dict in ecOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发生日期" prop="startTime">
                        <el-date-picker style="width: 240px" type="date" placeholder="请选择费用发生日期" 
                            clearable
                            v-model="itemForm1.startTime"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="单据张数" prop="invoiceNum">
                        <el-input-number style="width: 240px" v-model="itemForm1.invoiceNum" :min="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="金额" prop="expenseMoney">
                        <el-input style="width: 240px" v-model="itemForm1.expenseMoney" prefix-icon="el-icon-money"/>
                    </el-form-item>
                    <el-form-item label="附件">
                        <el-upload
                            ref="upload"
                            :headers="upload.headers"
                            :action="upload.url"
                            :disabled="upload.isUploading"
                            :on-progress="handleFileUploadProgress"
                            :on-success="handleFileSuccess1"
                            :on-remove="handleRemoveFile1"
                            :file-list="itemForm1.fileInfoList"
                            multiple
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    
                    <el-form-item label="备注" prop="expenseRemark">
                        <el-input style="width: 240px" type="textarea" v-model="itemForm1.expenseRemark" maxlength="200" placeholder="请填写备注" show-word-limit/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitItemForm1">确定</el-button>
                    <el-button type="cancle" @click="cancleItemForm">取消</el-button>
                </div>
            </el-dialog>
            <!-- 打车/住宿明细页面 结束 -->
            
        </el-dialog>
        <!-- 报销页面 结束 -->

        <!-- 查看页面 -->
        <el-dialog
            title="查看"
            :visible.sync="showDialogVisible"
            width="80%"
            @close="closeShow"
        >
            <travelShow :propTravelId="travelId" ></travelShow>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeShow">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 查看页面 结束 -->
         <!-- 打印页面 开始-->
        <el-dialog :title="printTitle" :visible.sync="printOpen" width="800px" height="600px" @close='closePrintDialog'>
            <travelPrint ref="getPrintPage" v-if="printReset" :currentPrintTab="currentPrintTab" :propTravelId="travelId"></travelPrint>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="myPrint1">打印</el-button>
                <el-button @click="exportPrint">导出</el-button>
                <el-button @click="cancelPrint">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 打印页面 结束-->

        <!-- 查看时间线 -->
        <el-dialog title="审核记录" :visible.sync="open2" width="800px">
            <timesProcess :instanceId="instanceIdParam" ></timesProcess>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelTimes">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselectNA } from "@/api/system/dept";
import { listTravel, addTravel, updateTravel,getTravel,deleteTravel,reportCash,reportCashAgain,updateDinnerMx,exportMx } from '@/api/product/travel';
import { listItem } from '@/api/item/item';
import { getUserProfile } from "@/api/system/user";
import { getMonthStartAndEnd } from "@/utils/index";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import travelShow from "@/views/product/travel/view/travelShow";
import travelPrint from "@/views/product/travel/view/travelPrint"
import timesProcess from "@/views/product/cashAuditDone/timesProcess";

export default {
    name:"cash",
    components:{
        Treeselect,
        travelShow,
        travelPrint,
        timesProcess
    },
    data() {
        let validate = function(rule, value, callback){
            if(Array.isArray(value)){ //格式为：daterange、datetimerange检测
                value.map(function(item){
                    if(item === ""){
                    return callback("日期不能为空")
                    }
                })
            }else{ //格式为：date、datetime、year、month 检测
                if(value === ''){
                    return callback("日期不能为空")
                }
            }
            return callback()
        }
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                expenseTime:'',
            },
            tableData : [],
            // 总条数
            total: 0,
            loading:false,//列表加载控制
            dialogVisible:false,//报销弹窗控制
            innerVisible:false,//火车报销明细弹窗控制
            innerVisible1:false,//打车报销明细弹窗控制
            showDialogVisible:false,//查看弹窗控制
            showItemVisible:false,//查看报销明细弹窗控制
            title:"",
            deptOptions:undefined,//部门下拉
            proItemOpt:{},//项目列表
            ecOptions:{},
            transportOptions:{},
            travelId:"",//要操作的报销单
            instanceIdParam:"",
            open2:false,
            printReset:true,
            dataFrom:{//报销表单
                deptId:"",
                expenseName:"",
                expenseTime:null,
            },
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            //获取选中的列
            ids:[],
            //报销表单
            rules:{
                expenseName:[
                    {required: true, message: "姓名不能为空", trigger: "blur"}
                ],
                deptId:[
                    {required: true, message: "部门不能为空", trigger: "blur"}
                ],
                expenseTime:[
                    {required: true, message: "报销日期不能为空", trigger: "blur"}
                ],
                cashTimeStart:[
                    {required: true, validator: validate,message: "现金日期不能为空", trigger: "blur"}
                ],
            },
            //明细规则
            itemRules:{
                invoiceNum:[
                    {required: true, message: "发票数不能为空", trigger: "blur"}
                ],
                transport:[
                    {required: true, message: "交通工具不能为空", trigger: "blur"}
                ],
                expenseMoney:[
                    {required: true, message: "请填写正确金额", trigger: "blur"},
                        {
                            pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                            message: "请填写正确金额",
                            trigger: "blur"
                        }
                ],
                expenseMoney3:[
                    {required: true, message: "请填写正确金额", trigger: "blur"},
                        {
                            pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/,
                            message: "请填写正确金额",
                            trigger: "blur"
                        }
                ],
                startTime:[
                    {required: true, message: "出发时间不能为空", trigger: "blur"}
                ],
                startTime3:[
                    {required: true, message: "出发时间不能为空", trigger: "blur"}
                ],
                beginPlace:[
                    {required: true, message: "出发地不能为空", trigger: "blur"}
                ],
                beginPlace3:[
                    {required: true, message: "出发地不能为空", trigger: "blur"}
                ],
                transport:[
                    {required: true, message: "交通工具不能为空", trigger: "blur"}
                ],
                transport3:[
                    {required: true, message: "交通工具不能为空", trigger: "blur"}
                ],
                arriveTime:[
                    {required: true, message: "到达时间不能为空", trigger: "blur"}
                ],
                arriveTime3:[
                    {required: true, message: "到达时间不能为空", trigger: "blur"}
                ],
                endPlace:[
                    {required: true, message: "目的地不能为空", trigger: "blur"}
                ],
                endPlace3:[
                    {required: true, message: "目的地不能为空", trigger: "blur"}
                ],
                invoiceNum:[
                    {required: true, message: "单据张数不能为空", trigger: "blur"}
                ],
                invoiceNum3:[
                    {required: true, message: "单据张数不能为空", trigger: "blur"}
                ]


                
            },
            //最近日期
            pickerOptions:{
                shortcuts: [
                    {
                        text: '前一个月',
                        onClick(picker) {
                            let t = getMonthStartAndEnd(-1);
                            picker.$emit('pick', [t[0], t[1]]);
                        }
                    },
                    {
                        text: '前两个月',
                        onClick(picker) {
                            let t = getMonthStartAndEnd(-2);
                            picker.$emit('pick', [t[0], t[1]]);
                        }
                    },
                    {
                        text: '前三个月',
                        onClick(picker) {
                            let t = getMonthStartAndEnd(-3);
                            picker.$emit('pick', [t[0], t[1]]);
                        }
                    },
                ]
            },
            itemData:[],//火车报销明细列表
            itemForm:{
                fileInfoList:[],
                changeTravelItemList:[{}]
            },//报销明细填报
            itemData1:[],//打车报销明细列表
            itemForm1:{
                fileInfoList:[]
            },//报销明细填报
            upload: {
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload"
            },
            /********打印开始*********** */
            printOpen:false,
            printTitle:'我的打印',
            currentPrintTab:'main'
            /********打印结束*********** */
        }
    },
    created() {
        this.getTreeselect();//获取部门树
        this.getUser();//获取用户信息
        this.getDate();//自动填充日期
        //加载报销内容字典
        this.getDicts("travelType").then(response => {
            this.ecOptions = response.data;
        });
        
        
        this.getDicts("transport").then(response => {
            this.transportOptions = response.data;
        });
        
        this.handleQuery();//查询报销列表
        this.getProItem();//获取项目信息
    },
    methods: {
        //搜索功能
        handleQuery() {
            this.loading = true;
            listTravel(this.queryParams).then(
                response => {
                    this.tableData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        //按钮控制
        handleSelectionChange(selection){
            this.ids = selection.map(item => item.travelId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        //弹出新增窗口
        handleAdd() {
            this.title = "新增";
            this.itemData=[];
            this.itemData1=[];
            this.dataFrom={
                deptId:"",
                expenseName:"",
                expenseTime:null,
            };
            this.getTreeselect();//获取部门树
            this.getUser();//获取用户信息
            this.getDate();//自动填充日期
            this.dialogVisible = true;
        },
        //加载部门树
        getTreeselect() {
            treeselectNA().then(response => {
                this.deptOptions = response.data;
            });
        },
        //获取项目信息
        getProItem() {
            listItem().then(response => {
                this.proItemOpt = response.rows;
            });
        },
        //新增保存
        submitForm() {
            this.$refs["dataFrom"].validate((valid) => {
                if (valid) {
                    if(this.itemData.length == 0){
                        this.msgError("请填写往返车票信息！");
                        return ;
                    }
                    //深度克隆
                    var s = JSON.stringify(this.dataFrom);
                    let addData = JSON.parse(s);
                    addData.cashTimeStart = this.dataFrom.cashTime[0];
                    addData.cashTimeEnd = this.dataFrom.cashTime[1];
                    delete addData.cashTime;
                    addData.itemDataStr = JSON.stringify(this.itemData).toString();
                    addData.itemData1Str = JSON.stringify(this.itemData1).toString();
                    addTravel(addData).then(
                        response => {
                            if (response.code === 200) {
                                this.msgSuccess("新增成功");
                                this.dialogVisible = false;
                                this.dataFrom.cashTime = null;
                                this.dataFrom.productId = null;
                                this.itemData=[]
                                this.itemData1=[]
                                this.itemForm={}
                                this.handleQuery();
                            } else {
                                this.msgError(response.msg);
                            }
                        }
                    );
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //更新保存
        updateForm() {
            this.$refs["dataFrom"].validate((valid) => {
                if (valid) {
                    //深度克隆
                    var s = JSON.stringify(this.dataFrom);
                    let addData = JSON.parse(s);
                    addData.cashTimeStart = this.dataFrom.cashTime[0];
                    addData.cashTimeEnd = this.dataFrom.cashTime[1];
                    delete addData.cashTime;
                    addData.itemDataStr = JSON.stringify(this.itemData).toString();
                    addData.itemData1Str = JSON.stringify(this.itemData1).toString();
                    updateTravel(addData).then(
                        response => {
                            if (response.code === 200) {
                                this.msgSuccess("操作成功");
                                this.dialogVisible = false;
                                this.dataFrom.cashTime = null;
                                this.dataFrom.productId = null;
                                this.itemData=[],
                                this.itemForm={},
                                this.handleQuery();
                            } else {
                                this.msgError(response.msg);
                            }
                        }
                    );
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /** 上报按钮操作 */
        reportData(row) {
            const ids = row.id ;
            this.$confirm('是否确认上报数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(function() {
                return reportCash(ids);
                }).then(() => {
                this.handleQuery();
                this.msgSuccess("操作成功");
                }).catch(function() {});
        },
        //调整修改上报
        reportDataAgain(row) {
            const ids = row.id ;
            this.$confirm('是否确认上报数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(function() {
                return reportCashAgain(ids);
                }).then(() => {
                this.handleQuery();
                this.msgSuccess("操作成功");
                }).catch(function() {});
        },
        /** 查看审核记录 */
        handleViewHist(row) {
            const instanceId = row.instanceId;
            this.instanceIdParam = instanceId
            this.open2 = true;
        },
        //新增修改弹窗-取消
        cancleForm(){
            this.dialogVisible = false;
        },
        //获取用户信息
        getUser() {
            getUserProfile().then(response => {
                this.dataFrom.deptId = response.data.deptId;
                this.dataFrom.expenseName = response.data.nickName;
            });
        },
        //获取当前日期
        getDate() {
            let now = new Date();
            var y = now.getFullYear();  
            var m = now.getMonth() + 1;  
            m = m < 10 ? '0' + m : m;  
            var d = now.getDate();  
            d = d < 10 ? ('0' + d) : d;  
            this.dataFrom.expenseTime = y + '-' + m + '-' + d;
        },
        //弹出报销明细页面
        showItem(){
            this.itemForm={
                fileInfoList:[],
                changeTravelItemList:[{'travelDirection':'1'},{'travelDirection':'3'}]
            }
            this.innerVisible= true
        },
        //弹出打车报销明细页面
        showItem1(){
            this.itemForm1={
                fileInfoList:[]
            }
            this.innerVisible1= true
        },
        //增加中转
        addChangeTravelItem(){
            this.itemForm.changeTravelItemList.push({
                index: this.itemForm.changeTravelItemList.length,
                travelDirection:'2'
            })
        },
        //删除中转
        deleteChangeTravel(index) {
            this.itemForm.changeTravelItemList.splice(index, 1)
            for (let i in this.itemForm.changeTravelItemList) {
                this.itemForm.changeTravelItemList[i].index = i
            }
        },
        submitItemForm() {
            this.$refs["itemForm"].validate((valid) => {
                if (valid) {
                     if(this.itemForm.index != null){
                        //编辑
                        this.itemData[this.itemForm.index] = this.itemForm
                    } else {
                        this.itemForm.index = this.itemData.length;
                        this.itemData.push(this.itemForm);
                    }
                    this.itemForm={};
                    this.innerVisible= false;

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        submitItemForm1() {
            this.$refs["itemForm1"].validate((valid) => {
                if (valid) {
                     if(this.itemForm1.index != null){
                        //编辑
                        this.itemData1[this.itemForm1.index] = this.itemForm1
                    } else {
                        this.itemForm1.index = this.itemData1.length;
                        this.itemData1.push(this.itemForm1);
                    }
                    this.itemForm1={};
                    this.innerVisible1= false;

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //关闭报销明细弹窗
        cancleItemForm() {
            this.innerVisible= false;
            this.innerVisible1= false;
        },
        //格式化交通工具
        formatTransport(row, column, cellValue, index) {
            for(var i in this.transportOptions){
                if(this.transportOptions[i].dictValue == cellValue){
                    return this.transportOptions[i].dictLabel;
                }
            }
        },

        //格式化总票数
        formatInvoiceNumSum(row, column, cellValue, index) {
            let changeTravelItemList = row.changeTravelItemList 
            let changeTravelInvoiceNum = 0
            changeTravelItemList.forEach(item => {
                changeTravelInvoiceNum = changeTravelInvoiceNum + Number(item.invoiceNum)
            })
            return changeTravelInvoiceNum
        },
        //格式化差旅金额
        formatExpenseMoney(row, column, cellValue, index) {
            let changeTravelItemList = row.changeTravelItemList 
            let changeTravelMoney = 0
            changeTravelItemList.forEach(item => {
                changeTravelMoney = changeTravelMoney + Number(item.expenseMoney)
            })
            this.$set(row,"expenseMoneySum", Number(row.travelAllowance) +changeTravelMoney)
            return Number(row.travelAllowance) +changeTravelMoney
        },
        //格式化报销内容
        formatTravelType(row, column, cellValue, index) {
            for(var i in this.ecOptions){
                if(this.ecOptions[i].dictValue == cellValue){
                    return this.ecOptions[i].dictLabel;
                }
            }
        },
        //编辑报销明细
        editItem(scope) {
            this.itemForm = scope.row;
            this.itemForm.index = scope.$index;
            this.innerVisible= true;
        },
        //编辑报销明细
        editItem1(scope) {
            this.itemForm1 = scope.row;
            this.itemForm1.index = scope.$index;
            this.innerVisible1= true;
        },
        //删除报销明细
        deleteItem(row) {
            this.itemData.splice(row.$index,1)
        },
        //删除报销明细
        deleteItem1(row) {
            this.itemData1.splice(row.$index,1)
        },
        
        
        //合计逻辑
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计';
                return;
            }
            if (column.property == "costTime" || column.property == "expenseRemark") {
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return (prev*100 + curr*100)/100;
                } else {
                    return prev/100;
                }
                }, 0);
            } else {
                sums[index] = '';
            }
            });

            return sums;
        },

        //查看功能
        showTravel(row){
            this.travelId = row.travelId;
            this.showDialogVisible = true;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.isUploading = false;
            for(var i in fileList){
                fileList[i].url = fileList[i].response.url;
                fileList[i].fileName = fileList[i].response.fileName;
            }
            this.itemForm.fileInfoList = fileList;
            this.itemForm.fileList = fileList;
        },
        // 文件上传成功处理
        handleFileSuccess1(response, file, fileList) {
            this.upload.isUploading = false;
            for(var i in fileList){
                fileList[i].url = fileList[i].response.url;
                fileList[i].fileName = fileList[i].response.fileName;
            }
            this.itemForm1.fileInfoList = fileList;
            this.itemForm1.fileList = fileList;
        },
        //上传文件删除
        handleRemoveFile(file, fileList) {
            this.itemForm.fileInfoList = fileList;
            this.itemForm.fileList = fileList;
        },
        //上传文件删除
        handleRemoveFile1(file, fileList) {
            this.itemForm1.fileInfoList = fileList;
            this.itemForm1.fileList = fileList;
        },
        //编辑报销单
        handleEdit(row) {
            this.title = "编辑";
            let travelId = row.travelId || this.ids[0]
            getTravel({travelId:travelId}).then(
                response => {
                    this.dialogVisible = true;
                    let dataFromDb = response.data.travelDomain;
                    dataFromDb.cashTime = [response.data.travelDomain.cashTimeStart,response.data.travelDomain.cashTimeEnd]
                    this.dataFrom = response.data.travelDomain;
                    this.itemData = response.data.itemMainDomain;
                    this.itemData1 = response.data.itemTaxiDomain;
                }
            );
        },
        //删除报销单
        handleDelete() {
            let travelIds = this.ids;
            this.$confirm('是否确认删除' + travelIds.length + '条数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
            }).then(function() {
                return deleteTravel(travelIds);
            }).then(() => {
                this.handleQuery();
                this.msgSuccess("删除成功");
            }).catch(function(e) {
                console.error(e);
            });
        },
        //关闭查看报销单窗口
        closeShow() {
            this.dataFrom = {};
            this.itemData = [];
            this.itemData1 = [];
            this.travelId = "";
            this.showDialogVisible = false;
        },
         //导出报销明细
        exportPrint(){
            exportMx(this.travelId).then(response => {
                console.log('exportMx', response.msg);
                this.download(response.msg);
            });      
        },
        //打印
        printTravel(row){
            this.printOpen = true;
            this.travelId = row.travelId;
            this.printReset = true;
        },
        cancelPrint(){
            this.printOpen = false;
            this.printReset = false;//销毁组件       
        },
        closePrintDialog(){
            this.printOpen = false;
            this.printReset = false;//销毁组件     
        },
         myPrint1(){
            this.$refs.getPrintPage.myPrint() 
        },
        cancelTimes(){
            this.instanceIdParam = '' 
            this.open2 = false;
        }
    }
}
</script>
<style>
  .travel_show_span {
      line-height: 40px;
      font-weight:700;
  }
  .div_travel{
      border-bottom:1px solid #DCDFE6
  }
  .div_travel_top{
      margin-top:5px
  }
  .el-date-picker .el-scrollbar:nth-of-type(2){
    display:none;
  }
</style>
